<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象和jQuery对象</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>
        <p>1、DOM对象：用原生 js获取过来的对象就是 DOM对象。</p>
    </div>
    <script>
        //使用元素 js获取的对象就是 DOM对象。
        var myDiv = document.querySelector('div'); // myDiv 是 DOM对象
        console.dir(myDiv)
        myDiv.style.display = 'none'

        //2、jQuery对象：用jQuery方式获取过来的对象是 jQuery对象。本质：通过 $把 DOM元素进行了包装。
        var jqdiv = $('div'); // $('div') 是jQuery对象。
        console.dir($(jqdiv))
        jqdiv.show();

        //3、jQuery对象只能使用 jQuery方法，DOM对象则使用原生的 js属性和方法。两者不能混用。
    </script>
</body>
</html>